
import React from 'react'
import { useEffect,useState } from 'react'
import { useNavigate,useLocation } from 'react-router-dom'
import './index.css'
import { Button } from 'antd-mobile'
function index () {
    let navigate=useNavigate()

    const { state } = useLocation();
    const [list,setList] = useState([])
    const price=list.filter((item)=>item.status==='yixuan')
    const getData=Array.from({length:50},(_,index)=>{
        return {
            id:`D${index+1}`,
            status:
                index ===5||index ===28||index ===37
                ?'yixuan'
                :index%3===0
                ?'yuding'
                :'kexuan'
        }
    })
    useEffect(()=>{
        setList(getData)
    },[])

    const clickSeat=(id)=>{
        setList((prve)=>{
            return prve.map((item)=>{
                if(item.id===id&&item.status!=='yuding'){
                    return {
                        ...item,
                        status:item.status==='kexuan'?'yixuan':'kexuan'
                    }
                }else{
                    return item
                }
            })
        })
    }
  return (
    <div>
      <div className='box'>
        {
            list.map((item,index)=>(
                <div key={index} className={item.status} onClick={()=>clickSeat(item.id)}>
                    {item.status=='yixuan'&&item.id}
                </div>
            ))
        }
      </div>
      <div>
        <span className="yy">zis</span>预定:￥140
        <span className="kk">zis</span>可选:￥140
        <span className="yx">zis</span>已选:￥140
      </div>
      <div>
        <span>已选：</span>
        {
            list.map((item,index)=>(
                <span key={index}>
                    {item.status==='yixuan'&&item.id}
                </span>
            ))
        }
      </div>
      <div>
        <span>总价：</span>
        {
            price.length*140
        }元
      </div>
      <Button
      block color='primary' size='large'
        className="d_btn"
        onClick={() =>
          navigate(`/order`, {
            state: {
              ...state,
              seatcount: list.length,
              seatprice: price.length*140,
            },
          })
        }
      >
        立即预定
      </Button>
    </div>
  )
}

export default index
